<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    插槽作用域
      - 插槽内容中使用的数据找谁要

    作用域插槽
      - 有时我们可能期望在插槽内容中能够获取到子组件的数据，就需要使用作用域插槽的技术。

      实现：
        1. 子组件的 solt 元素上需要传递一些 attr
        2. 这些属性会被收集成一个对象，然后通过 v-slot 获取到该收集到的对象
          v-slot:default="slotScope"

          slotScope - 就是收集到的对象（传递给 slot 元素上的 attr 的集合）
   -->

    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            msg: "张三",
          };
        },
        template: `
          <div>
            <hello>
              <template v-slot:default="obj">
                <button>点我, {{ obj.c }}</button>  
              </template>  

              <template v-slot:footer="{a, b}">
                <button>点我2, {{ a }} - {{ b }}</button>  
              </template>  
            </hello>  
          </div>
        `,
      });

      app.component("hello", {
        data() {
          return {
            msg: "里斯",
          };
        },
        template: `
          <div>
            <p>欢迎，xxx</p>  
            <slot a="aa" b="bb" :c="msg" />
            <hr />
            <slot name="footer" a="1" b="2" />
          </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
